Carousel
A jQuery plugin for simple content carousels.
Demo
Single
Basic
Paged
Uneven
Infinite
No Controls
Breakpoint
Responsive Counts
Links
Right to Left
Auto Height
Custom Controls
Use
Main
carousel.js
carousel.css
Dependencies
jQuery
core.js
mediaquery.js
touch.js
Basic
Carousel will treat immediate children as items to scroll through. By default, all items will be sized to the width of the carousel.
$(".target").carousel();
<div class="target">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
Show
Set the show
option to a value, or object, at initialization to allow more items to be visible at once. If passing an object keys should be valid min-width
media query values, including units.
$(".target").carousel({
show: 2
});
$(".target").carousel({
show: {
"740px" : 2,
"960px" : 3
}
});
Note: Carousel items that don't meet jQuery's :visible
selector requirements will not be counted as active items. This can be useful when filtering or updating a set of items.
Options
Set instance options by passing a valid object at initialization, or to the public defaults
method. Custom options for a specific instance can also be set by attaching a data-carousel-options
attribute to the target elment. This attribute should contain the properly formatted JSON object representing the custom options.
Name | Type | Default | Description | |
---|---|---|---|---|
autoAdvance |
boolean |
false |
Flag to auto advance items | |
autoHeight |
boolean |
false |
Flag to adjust carousel height to visible item(s) | |
autoTime |
int |
8000 |
Auto advance time | |
contained |
boolean |
true |
Flag for 'overflow: visible' | |
controls |
`boolean | object` | true |
Flag to draw controls OR object containing next and previous control selectors |
customClass |
string |
'' |
Class applied to instance | |
fill |
boolean |
false |
Flag to fill viewport if item count is less then show count | |
infinite |
boolean |
false |
Flag for looping items | |
labels.next |
string |
'Next' |
Control text | |
labels.previous |
string |
'Previous' |
Control text | |
matchHeight |
boolean |
false |
Flag to match item heights | |
maxWidth |
string |
'Infinity' |
Width at which to auto-disable plugin | |
minWidth |
string |
'0' |
Width at which to auto-disable plugin | |
paged |
boolean |
false |
Flag for paged items | |
pagination |
boolean |
true |
Flag to draw pagination | |
show |
int / object |
1 |
Items visible per page; Object for responsive counts | |
rtl |
boolean |
false |
Right to Left display | |
useMargin |
boolean |
false |
Use margins instead of css transitions (legacy browser support) |
Events
Events are triggered on the target instance's element, unless otherwise stated.
Event | Description |
---|---|
update.carousel |
Carousel position updated |
Methods
Methods are publicly available to all active instances, unless otherwise stated.
disable
Disables instance of plugin
$(".target").carousel("disable");
enable
Enables instance of plugin
$(".target").carousel("enable");
jump
Jump instance of plugin to specific page
$(".target").carousel("jump", 1);
next
Move to next item
Parameters
Name | Type | Default | Description |
---|---|---|---|
data |
object |
Instance data |
previous
Move to the previous item
$(".target").carousel("previous");
reset
Resets instance after item change
$(".target").carousel("reset");
resize
Resizes instance
$(".target").carousel("resize");
update
Updates carousel items
$(".target").carousel("update", "...");
CSS
Class | Type | Description |
---|---|---|
.fs-carousel-element |
element |
Target elmement |
.fs-carousel |
element |
Base widget class |
.fs-carousel.fs-enabled |
modifier |
Indicates enabled state |
.fs-carousel.fs-rtl |
modifier |
Indicates right to left display |
.fs-carousel.fs-carousel-auto_height |
modifier |
Indicates auto height sizing |
.fs-carousel.fs-carousel-contained |
modifier |
Indicates overflow: hidden |
.fs-carousel.fs-carousel-single |
modifier |
Indicates single item display |
.fs-carousel-viewport |
element |
Carousel container |
.fs-carousel-wrapper |
element |
Carousel container |
.fs-carousel-container |
element |
Canister container |
.fs-carousel-canister |
element |
Item container |
.fs-carousel-canister |
element |
Item container |
.fs-carousel-item |
element |
Individual item |
.fs-carousel-controls |
element |
Controls container |
.fs-carousel-controls.fs-carousel-visible |
modifier |
Indicates visible state |
.fs-carousel-control |
element |
Control element |
.fs-carousel-control.fs-carousel-control_previous |
modifier |
Indicates previous control |
.fs-carousel-control.fs-carousel-control_next |
modifier |
Indicates next control |
.fs-carousel-control.fs-carousel-control_disabled |
modifier |
Indicates disbaled state |
.fs-carousel-pagination |
element |
Item element |
.fs-carousel-pagination.fs-carousel-visible |
modifier |
Indicates visible state |
.fs-carousel-page |
element |
Pagiantion item element |
.fs-carousel-page.fs-carousel-active |
modifier |
Indicates active state |